<template>
  <div class="input-list">
    <div class="input-box">
      <div class="flex" v-for="(item, index) in option.field" :key="index" :class="{ acitve: item.active }">
        <p>{{ item.name }}</p>
        <input :type="'text'"
          class="input-focus"
          v-model="item.value"
          :readonly="item.isReadonly"
          :placeholder="item.placeholder"
          @change="inputChange(item)"
          @focus="focusClick(item, index)"
          @blur="blurScroll"
        />
      </div>
    </div>
    <div class="van-hairline--top-bottom">
      <div class="tip-box">
        <span class="tip-left"></span>
        <span class="tip-center">{{ tipName }}</span>
        <span class="tip-right" @click.stop="defineHandle">{{ defineStr }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    option: {
      type: Object,
      required: true   
    }
  },
  data() {
    let list = this.option.field
    return {
      list
    }
  },
  computed: {
    tipName() {
      let item = this.option.field.find(item => item.active)
      if (item) {
        return item.placeholder + item.name
      }
    },
    defineStr() {
      let index = ''
      this.option.field.find((item, int) => {
        if (item.active) {
          index = int
        }
      })
      return index !== (this.option.field.length - 1) ? '确定' : '完成'
    }
  },
  methods: {
    blurScroll() {
      const ev = event || window.event
      let { relatedTarget } = ev

      let index = ''
      this.option.field.forEach((item, int) => {
        if (item.active) {
          index = int
          if (item.value) {
            item.isEmpty = false
          } else {
            item.isEmpty = true
          }
        }
      })
      // 输入框之间的聚焦失焦切不进行操作
      // 仅对输入框的失焦进行操作
      if (!relatedTarget && this.option.field.length -1 === index) {
        this.$nextTick(() => {
          window.scroll(0, 0)
          this.define = true
        })
      }
    },
    inputChange(item) {
      if (item.value) {
        let plugin = this.option.plugin
        plugin && plugin(item)
        item.isEmpty = false
      } else {
        item.isEmpty = true
      }
    },
    focusClick(item, index) {
      if (item.isReadonly) {
        document.activeElement.blur()
      } 
      this.option.field.forEach(list => {
        list.active = false
      })
      item.active = true;
      this.$emit('inputSwitch', item)
      // console.log(item)
    },
    defineHandle() {
      let index = ''
      let item = this.option.field.find((item, int) => {
        if (item.active) {
          index = int
          return item
        }
      })
      if (index !== this.option.field.length -1 ) {
        this.define = false
        let element = this.$el.getElementsByClassName('input-focus')[index+1]
        setTimeout(() => {
          element.focus()
        }, 0)
        console.log('下一个')
      } else {
        this.$emit('hidePopup', this.option)
        console.log('发送事件')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.input-list {
  .input-box {
    display: flex;
    .flex {
      flex: 1;
      height: 84px;
      font-size: 14px;
      color: #13284D;
      padding: 13px 0 16px;
      border-top: 3px solid #fff;
      p {
        margin-bottom: 8px;
        text-align: center;
      }
      input {
        width: 100%;
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        border: 0px;
        font-weight: 400;
        padding: 4px 6px;
        color: #007AE6;
        text-align: center
      }
    }
    .acitve {
      border-color: #007AE6;
    }
  }
  .tip-box {
    display: flex;
    height: 44px;
    padding: 0 16px;
    align-items: center;
    text-align: center;
    font-size: 16px;
    .tip-left, .tip-right {
      color: #007AE6;
      flex-basis: 40px;
    }
    .tip-center {
      flex: 1;
      color: #999;
    }
  }

  .van-hairline--top-bottom::after {
    border-color: #D2D8DD;
  }
}
</style>